<template>
  <div class="menu-bar-container">
    <!-- logo -->
    <div
      class="logo"
      :style="{ 'background-color': themeColor,width:mW }"
      @click="$router.push('/')"
    >
      <img v-if="collapse" src="@/assets/png/logo.png" />
      <img src="@/assets/png/logo.png" style="width: 30px; height: 30px" />
      <div style="font-size: 22px">{{ collapse ? "" : appName }}</div>
    </div>
    <!-- 导航菜单 -->
    <!-- :class="collapse ? 'menu-bar-collapse-width' : 'menu-bar-width'" -->
    <el-menu
      ref="navmenu"
      default-active="1"
      class="el-menu-vertical-demo"

      :collapse="collapse"
     
      :unique-opened="true"
      @open="handleopen"
      @close="handleclose"
      @select="handleselect"
      :background-color="themeColor"
    >
      <!-- 导航菜单树组件，动态加载菜单 -->
      <menu-tree
        v-for="item in navTree"
        :key="item.Id"
        :menu="item"
      ></menu-tree>
    </el-menu>
  </div>
</template>

<script>
import bus from "../../bus/bus";
import { mapState } from "vuex";
import MenuTree from "../components/MenuTree";
export default {
  data() {
    return {
      mW: "200px",
    };
  },
  mounted() {
    bus.$on("menuw", (e) => {
      if (this.collapse) {
        this.mW = "65px";
      } else {
        this.mW = "200PX";
      }
    });
  },
  components: {
    MenuTree,
  },
  computed: {
    ...mapState({
      appName: (state) => state.app.appName,
      themeColor: (state) => state.app.themeColor,
      collapse: (state) => state.app.collapse,
      navTree: (state) => state.menu.navTree,
    }),
    mainTabs: {
      get() {
        return this.$store.state.tab.mainTabs;
      },
      set(val) {
        this.$store.commit("updateMainTabs", val);
      },
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.tab.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("updateMainTabsActiveName", val);
      },
    },
  },
  watch: {
    $route: "handleRoute",
  },
  created() {
    this.handleRoute(this.$route);
  },
  methods: {
    handleopen() {
      //console.log('handleopen')
    },
    handleclose() {
      //console.log('handleclose')
    },
    handleselect(a, b) {
      //console.log('handleselect')
    },
    // 路由操作处理
    handleRoute(route) {
      // tab标签页选中, 如果不存在则先添加
      var tab = this.mainTabs.filter((item) => item.name === route.name)[0];
      if (!tab) {
        tab = {
          name: route.name,
          title: route.name,
          icon: route.meta.icon,
        };
        this.mainTabs = this.mainTabs.concat(tab);
      }
      this.mainTabsActiveName = tab.name;
      // 切换标签页时同步更新高亮菜单
      if (this.$refs.navmenu != null) {
        this.$refs.navmenu.activeIndex = "" + route.meta.index;
        this.$refs.navmenu.initOpenedMenu();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.menu-bar-container {
  position: fixed;
  top: 0px;
  left: 0;
  bottom: 0;
  z-index: 1020;
  .el-menu {
    position: absolute;
    top: 60px;
    bottom: 0px;
    text-align: left;
    /deep/ .el-submenu__title{
     background-color: #2968a30c;
    }
    // background-color: #2968a30c;
  }
  .logo {
    position: absolute;
    top: 0px;
    height: 60px;
    width: 200px;
    line-height: 60px;
    background: #545c64;
     transition: width 0.3s;
    -webkit-transition: width 0.3s; /* Safari */
    cursor: pointer;
    img {
      width: 40px;
      height: 40px;
      border-radius: 0px;
      margin: 18px 10px 10px 10px;
      float: left;
    }
    div {
      font-size: 25px;
      color: white;
      text-align: left;
      padding-left: 20px;
    }
  }
  .menu-bar-width {
    background-color: #2968a30c;
    color: #fff !important;
     transition: width 0.3s;
    -webkit-transition: width 0.3s; /* Safari */
    transition-timing-function: linear;
  }
  .menu-bar-collapse-width {
    width: 65px;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
